<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <title>PhyTouch</title>
    <style>
      .container{
        height: 100vh;
      }
      .master {
        height: 40px;
        background: #888;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      .follower {
        height: 40px;
        background: #fff;
        color: #888;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div class='container'>
      <div class="master">it is master</div>
      <div class="follower">it is follower</div>
    </div>
      <script src="../index.js"></script>
    <script src="../transformjs/transform.js"></script>
    <script>
      var container = document.querySelector(".container");
      var master = document.querySelector(".master");
      var follower = document.querySelector(".follower");
      Transform(master);
      Transform(follower);
      new PhyTouch({
        touch: container,
        vertical: true, //不必需，默认是true代表监听竖直方向touch
        property: "translateY", //被滚动的属性
        target: master,
        followers: [
          {
            element: follower,
            offset: 10,
          }
        ],
        min: 0,
        max: 400,
        value: 0,
      });
    </script>
  </body>
</html>
